import React, {PureComponent} from 'react';
import {Button, Divider, Icon, message, Popconfirm, Table, Tooltip, Typography} from 'antd';
import {connect} from 'dva';

@connect(state => ({
  fileManage: state.fileManage,
}))
class StandardTable extends PureComponent {
  state = {
    selectedRowKeys: []
  };

  handleOnClick = (record) => {
    const {dispatch, fileManage} = this.props;
    fileManage.pagination = {
      page: 1
    };
    dispatch({
      type: 'fileManage/remove',
      payload: {id: record.id},
      callback: (resultData) => {
        if (resultData.resultCode === "1") {
          message.success('删除成功');
        } else {
          message.success('删除失败');
        }
      },
    });
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }
    this.setState({selectedRowKeys});
  }

  /**
   * 页码更改
   * */
  handPageChange = (current, pageSize) => {
    const {fileManage, dispatch} = this.props;
    fileManage.pagination = {
      page: current,
      pageSize: pageSize,
    };
    dispatch({
      type: 'fileManage/fetch',
    });
  }

  /**
   * 刷新
   * */
  refresh = () => {
    const {dispatch} = this.props;
    dispatch({
      type: 'fileManage/fetch',
    });
  }

  render() {
    const {selectedRowKeys} = this.state;
    const {data, data: {rows}, loading} = this.props;

    const pagination = {
      pageSizeOptions: ['5', '10', '15', '20'],
      total: data.total,
      defaultCurrent: 1,
      pageSize: data.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: total => <><span onClick={()=>this.refresh()} style={{cursor:'pointer', color:'#40a9ff', paddingRight:10}}><Tooltip placement="top" title='刷新'><span><Icon type="reload" /></span></Tooltip></span><span> 共 {total} 条</span></>,
      onShowSizeChange: (current, pageSize) => {
        this.handPageChange(current, pageSize)
      },
      onChange: (current, pageSize) => {
        this.handPageChange(current, pageSize)
      },
    };

    const columns = [
      {
        title: '序号',
        render:(text, record, index) => {
          return (index+1)+((data.page-1)*data.pageSize)
        }
      },
      {
        title: '文件名',
        dataIndex: 'fileName',
        align:'center'
      },
      {
        title: '文件格式',
        dataIndex: 'fileType',
        align:'center'
      },
      {
        title: '文件大小',
        dataIndex: 'fileSize',
        align:'center',
        render:(val)=><span>{val}B</span>
      },
      {
        title: '文件地址',
        dataIndex: 'fileUrl',
        align:'center',
        render:(val)=><Typography.Text copyable={{ text: val }}/>
      },
      {
        title: '文件二维码',
        dataIndex: 'fileQRUrl',
        align:'center',
        render:(value)=><Tooltip placement="top" title='下载文件二维码'><a href={value} target='_blank'><span style={{color: '#f19222'}}><Icon type="qrcode"/></span></a></Tooltip>
      },
      {
        title: '创建人',
        dataIndex: 'createName',
        align:'center'
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        align:'center'
      },
      {
        title: '操作',
        width: 130,
        align:'center',
        render: (record) => (
          <div style={{width: 125}}>
            {/*<Tooltip placement="top" title='修改'>*/}
              {/*<Button style={{padding: 0}} type="link" onClick={() => this.handleOnClick(record, 'edit')}><span><Icon*/}
                {/*type="edit"/></span></Button>*/}
            {/*</Tooltip>*/}
            {/*<Divider type="vertical"/>*/}
            <Popconfirm title="确定要删除该文件吗？" onConfirm={() => this.handleOnClick(record)}>
              <Tooltip placement="top" title='删除'>
                <Button style={{padding: 0}} type="link"><span style={{color: '#f13d74'}}><Icon
                  type="delete"/></span></Button>
              </Tooltip>
            </Popconfirm>
          </div>
        ),
      },
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <Table
        size="small"
        loading={loading}
        rowKey={record => record.id}
        // rowSelection={rowSelection}
        dataSource={rows}
        columns={columns}
        pagination={pagination}
      />
    );
  }
}

export default StandardTable;
